<template>
  <div class="main">
    <div class="group">
        <div class="content">
            <a :href="title_link.link" class="paTitle">{{ title_link.title }}</a>
            <ul class="list">
                <li v-for="item in list">
                    <a :href="item.link"><img :src="item.src" /></a>
                    <a :href="item.link" class="title">{{ item.title }}</a>
                    <p class="scorestar"><img src="../assets/lightstar.png" v-for="item in item.scorestar" /> <span>{{item.scorestar}} 分 </span></p>
                    <p class="newprice">团购价 <span>￥{{ item.newprice }}.00</span></p>
                    <p class="oldprice">原价 <span>￥{{ item.oldprice }}.00</span>   /   省 ￥ {{ item.province }}.00</p>
                    <div class="right">
                        <a :href="item.link" class="btn">立即抢购</a>
                        <p>距离结束 99天13时59分59秒</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page">
            <a href="javascript:;" @click="prev">上一页</a>
            <div class="select">
                <div class="val">{{ pageNum }}</div>
                <select v-model="pageNum">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <a href="javascript:;" @click="next">下一页</a>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    data (){
        return {
            title_link: {
                title: '',
                link: ''
            },
            pageNum: 1,
            list: [
                {
                    src: require('../assets/gz5e.jpg'),
                    link: '#/msg_groupprice?msg=groupprice&id=1',
                    title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
                    scorestar: 5,
                    newprice: 50,
                    oldprice: 180,
                    province : 0,
                    date: '距离结束 99天14时10分07秒',
                },
                {
                    src: require('../assets/gz5e.jpg'),
                    link: '#/msg_groupprice?msg=seckill&id=1',
                    title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
                    scorestar: 5,
                    newprice: 80,
                    oldprice: 180,
                    province : 0,
                    date: '距离结束 99天14时10分07秒',
                },
                {
                    src: require('../assets/gz5e.jpg'),
                    link: '#/msg_groupprice?msg=groupprice&id=2',
                    title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
                    scorestar: 5,
                    newprice: 100,
                    oldprice: 180,
                    province : 0,
                    date: '距离结束 99天14时10分07秒',
                },
                {
                    src: require('../assets/gz5e.jpg'),
                    link: '#/msg_groupprice?msg=seckill&id=2',
                    title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
                    scorestar: 5,
                    newprice: 120,
                    oldprice: 180,
                    province : 0,
                    date: '距离结束 99天14时10分07秒',
                },
                {
                    src: require('../assets/gz5e.jpg'),
                    link: '#/msg_groupprice?msg=groupprice&id=3',
                    title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
                    scorestar: 5,
                    newprice: 150,
                    oldprice: 180,
                    province : 0,
                    date: '距离结束 99天14时10分07秒',
                },
            ]
        }
    },
    methods: {
        prev (){
            if (this.pageNum > 1) {
                this.pageNum --;
            }
        },  
        next (){
            if (this.pageNum < 3) {
                this.pageNum ++;
            }
        }
    },
    computed: {
        update (){
            console.log('list='+ this.$route.query.list);
            if (this.$route.query.list == 'groupprice') {
              this.title_link = {
                title: '团购',
                link: '#/list_groupprice?list=groupprice'
              }
            }else if(this.$route.query.list == 'seckill'){
              this.title_link = {
                title: '秒杀',
                link: '#/list_groupprice?list=seckill'
              }
            }
        },
        provinceMoney (){
            for (var i = 0; i < this.list.length; i++) {
                this.list[i].province = this.list[i].oldprice - this.list[i].newprice;
            }
        }
    },
    created (){
        this.update;
        this.provinceMoney;
    },
    watch: {
        $route(){
            this.update;
        }
    }
  }
</script>
<style>
    .paTitle{
        width:100%; height:.44rem; background:#f4f4f4; text-align:center; font-size:.16rem; display:block; line-height:.44rem; margin:0 0 .15rem;
    }
    .group{
        overflow:hidden;
    }
    .group .list{
        padding:0 .08rem;
    }
    .group ul li{
        width:100%; border-bottom:0.01rem solid #e1e1e1; padding:0 0 .1rem; margin:0 0 .15rem; overflow:hidden;
    }
    .group ul li img{
        max-width:100%; 
    }
    .group ul li a{
        display:block; width:100%;
    }
    .group ul li .title{
        padding:.08rem 0 0.05rem; color:#959595; font-size:.14rem; line-height:1.6em;
    }
    .group .scorestar{
        width:1.1rem; overflow:hidden;
    }
    .group .scorestar img{
        width:.11rem;
    }
    .group .scorestar span{
        float:right; color:#8fc31f; line-height:12px; font-size:.1rem;
    }
    .group .newprice{
        height:.3rem; color:#e5004f; line-height:.3rem;
    }
    .group .newprice span{
        margin-left:.12rem; font-size:.18rem; color:#e5004f;
    }
    .group .oldprice{
        line-height:.25rem; color:#959595;
    }
    .group .oldprice span{
        text-decoration:line-through;
    }
    .group .right{
        float:right; margin-right:.1rem; color:#959595; overflow:hidden; text-align:right;
    }
    .group .right .btn{
        width:.6rem; height:.25rem; line-height:.25rem; text-align:center; color:#fff; background:#e5004f; float:right; margin: 0 0 .04rem;
    }
    .group .right p{
        clear:both; color:#959595; line-height:.3rem;
    }
</style>
